<!-- 建议管理 -->
<template>
  <div class="advice">
    <div class="search-wrap">
      <a-row
        type="flex"
        justify="space-between"
      >
        <a-col
          :span="7"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-60">用户名称</span>
          <a-input
            v-model="queryParam.userName"
            placeholder="请输入用户名称"
            style="width:260px"
          />
        </a-col>
        <a-col
          :span="7"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-60">建议标题</span>
          <a-input
            v-model="queryParam.title"
            placeholder="请输入建议标题"
            style="width:260px"
          />
        </a-col>
        <a-col
          :span="7"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-60">备注状态</span>
          <a-select
            :allowClear="true"
            style="width:260px"
            placeholder="请选择备注状态"
            v-model="queryParam.remarkState"
          >
            <a-select-option
              v-for="item in REMARKSTATES"
              :key="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-col>
      </a-row>
      <a-row
        class="m-t-24"
        type="flex"
        justify="space-between"
      >
        <a-col
          :span="7"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-60">提交时间</span>
          <a-range-picker
            format="YYYY-MM-DD"
            style="width:260px"
            @change="pickerChange"
          />
        </a-col>
        <a-col
          :span="7"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-60">所属区域</span>
          <a-select
            :allowClear="true"
            style="width:260px"
            placeholder="请选择所属区域"
            v-model="queryParam.areaId"
          >
            <a-select-option
              v-for="item in areaList"
              :key="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="7">
          <a-button
            class="m-r-30"
            type="primary"
            @click="onSearch"
          >
            检索
          </a-button>
          <a-button @click="reset">
            重置
          </a-button>
        </a-col>
      </a-row>
    </div>
    <div class="table-wrap m-t-30">
      <template>
        <s-table
          ref="sTable"
          size="default"
          :rowKey="(record) => record.id"
          :columns="columns"
          :data="loadData"
        >
          <span
            slot="action"
            slot-scope="text, record"
          >
            <a @click="view(record)">查看建议</a>
          </span>
        </s-table>
      </template>
    </div>
    <a-modal
      width="600px"
      title="查看建议"
      :visible="visible"
      @ok="handleOk"
      @cancel="visible = false"
    >
      <div class="section">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item label="建议编号">
            <span>{{form.code}}</span>
          </a-form-model-item>
          <a-form-model-item label="建议标题">
            <span>{{form.title}}</span>
          </a-form-model-item>
          <a-form-model-item label="建议内容">
            <span>{{form.content}}</span>
          </a-form-model-item>
          <a-form-model-item label="联系人">
            <span>{{form.contactName}}</span>
          </a-form-model-item>
          <a-form-model-item label="联系电话">
            <span>{{form.contactPhone}}</span>
          </a-form-model-item>
          <a-form-model-item label="请添加备注">
            <a-textarea
              v-action="`添加备注`"
              :maxLength="100"
              v-model="form.remark"
              placeholder="≤100位字符"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            />
          </a-form-model-item>
        </a-form-model>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {mapState} from 'vuex'
const columns = [
  {
    title: '序号',
    dataIndex: 'sort',
    key: 'sort',
  },
  {
    title: '建议编号',
    dataIndex: 'code',
    key: 'code',
  },
  {
    title: '用户名称',
    dataIndex: 'userName',
    key: 'userName',
  },
  {
    title: '建议标题',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '所属区域',
    key: 'areaName',
    dataIndex: 'areaName',
  },

  {
    title: '提交时间',
    key: 'createTime',
    dataIndex: 'createTime',
  },
  {
    title: '备注状态',
    key: 'remarkState',
    dataIndex: 'remarkState',
    customRender: (text, row, index) => {
      // 备注状态 0未备注 1已备注
      let value = ''
      if (text === 0) value = '未备注'
      if (text === 1) value = '已备注'
      return {
        children: value,
        attrs: {},
      };
    },
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
];
const REMARKSTATES = [
  { label: '未备注', value: '0' },
  { label: '已备注', value: '1' },
]
export default {
  name: 'advice',
  data () {
    return {
      REMARKSTATES,
      columns,
      visible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      // feedbackInfo: {},  
      form: {     //建议数据
        code: '',
        title: '',
        content: '',
        contactName: '',
        contactPhone: '',
        remark: '',
      },
      // 查询条件参数
      queryParam: {
        areaId: undefined,  //所属区域id
        remarkState: undefined,  //备注状态
        beginTime: '',  //开始时间
        endTime: '',  //结束时间
        userName: '',  //用户名称
        title: '',  //标题
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return this.$axios({
          url: '/feedback/list',
          cancel: {
            _self: this
          },
          method: 'get',
          params: Object.assign(parameter, this.queryParam)
        }).then(res => {
          return {
            data: res.data.feedbackList,
            totalCount: res.data.total,
            pageNo: res.data.curPage
          }
        })
      },
    };
  },
   computed:{
    ...mapState(['areaList'])
  },
  mounted () {
  },
  methods: {
    onSearch () {
      this.$refs.sTable.refresh(true)
    },
    reset () {
      this.queryParam = {
        areaId: undefined,  //所属区域id
        remarkState: undefined,  //备注状态
        beginTime: '',  //开始时间
        endTime: '',  //结束时间
        userName: '',  //用户名称
        title: '',  //标题
      }
    },
    //日期选择
    pickerChange (time, timeString) {
      this.queryParam.beginTime = timeString[0]
      this.queryParam.endTime = timeString[1]
    },
    //查看建议
    view (record) {
      this.visible = true
      this.form = record
    },
    handleOk () {
      this.$axios({
        url: 'feedback/remark',
        method: 'put',
        loadingEl: this.$el,
        cancel: {
          _self: this
        },
        data: {
          id: this.form.id,
          remark: this.form.remark
        }

      }).then(res => {
        this.visible = false
         this.$refs.sTable.refresh()
      })
    }
  }
}

</script>
<style scoped lang='less'>
.advice {
  .search-wrap {
  }
}
</style>